<template>
  <div>
    <el-dialog title="上传文件"
               :visible.sync="showDialog"
               :modal-append-to-body="false"
               width="30%"
               @open="onOpen"
               @close='quiteUpload'
               v-bind="$attrs">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="#"
        @open="onOpen"
        @close="onClose"
        :limit="1"
        :http-request="submitUpload"
        :auto-upload="true"
        :show-file-list="true"
        :file-list="fileList"
        :before-upload="beforeUpload">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <div>文件名:<span>{{this.filename}}</span></div>
        <div slot="tip" class="el-upload__tip">不超过5MB</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
    <el-button @click="quiteUpload">取消</el-button>
    <el-button type="primary" @click="submitUpload()">确定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
  import { saveFile } from '../../../api/system/file'
  import axios from 'axios'

  export default {
    name: 'FileAdd',
    props: {
      addOrUpdateVisible: {
        type: Boolean,
        default: false
      },
    },

    data () {
      return {
        showDialog: false,
        fileList: [],
        accept: ['txt', 'png', 'jpg', 'zip', 'ppt'],
        filename: '',
        files: '',
        file: {
          url: null,
          type: '',
          fileName: undefined,
          size: undefined,
        },
      }
    },
    watch: {
      // 监听 addOrUpdateVisible 改变
      addOrUpdateVisible () {
        this.showDialog = this.addOrUpdateVisible
      },
    },
    methods: {
      onOpen () {
      },
      onClose () {
        //清空当前弹窗数据
        this.filename = ''
        this.files = ''
        this.$emit('changeShow', 'false')
      },

      // 取消上传
      quiteUpload () {
        this.showDialog = false
        if (this.$refs.upload !== undefined) {
          this.$refs.upload.clearFiles()
          this.files = ''
          this.filename = ''
        }
        this.$emit('changeShow', 'false')
      },
      //文件格式大小检验
      beforeUpload (file) {
        console.log(file)
        this.files = file
        this.file.fileName = this.filename = file.name
        this.file.type = file.name.split('.')[1]
        this.file.size = file.size
        const extension = this.file.type.toLowerCase()
        const isLt5M = file.size / 1024 / 1024 < 100
        if (!isLt5M) {
          this.$message.warning('上传文件大小不能超过 5MB!')
          this.filename = ''
          file = ''
          return false
        }
      },
      //文件上传
      submitUpload () {
        if (this.filename === '') {
          this.$message.warning('请选择要上传的文件！')
          return false
        }
        const loading = this.$loading({
          lock: true,
          text: '文件上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let fileFormData = new FormData()
        //file是对接名 和接口接收实体对象名一样，files就是要传的文件
        fileFormData.append('file', this.files)
        axios({
          url: '/api/uploadFile',
          method: 'post',
          data: fileFormData
        }).then(resData => {
          if (resData) {
            this.$message.success('上传成功!')
            loading.close()
            this.file = resData.data.data.file
            this.addFile()
            this.$emit('Fresh')
            this.onClose()
          } else {
            loading.close()
          }
        })
        /* setTimeout(() => {
           loading.close()
         }, 5000)*/
      },

      async addFile () {
        await saveFile(this.file)
      },
    }
  }
</script>

<style scoped>

</style>
